<!-- 楼栋管理-->
<template>
  <basic-container>
<!--  <avue-data-box :option="databoxoption"></avue-data-box>-->
    <avue-crud
        ref="crud"
        :data="tableData"
        :option="tableOption"
        :page.sync="page"
        :table-loading="tableLoading"
        :visible.sync="outerVisible"
        @on-load="getList"
        @search-change="searchChange"
        @search-reset="searchReset"
        @size-change="sizeChange"
        @current-change="currentChange"
        @row-del="handleDel"
        @row-save="handleRowSave"
        @row-update="handleRowUpdate">
      <template slot-scope="scope" slot="menuLeft">
        <el-button
            class="filter-item"
            icon="el-icon-plus"
            size="small"
            type="primary"
            @click="addHandle()">新增
        </el-button>
      </template>
      <!--      <template slot-scope="scope" slot="menuLeft">-->
      <!--                <el-button-->
      <!--                        class="filter-item"-->
      <!--                        icon="el-icon-delete"-->
      <!--                        size="small"-->
      <!--                        type="danger"-->
      <!--                        @click="batchDelVisible()">批量删除-->
      <!--                </el-button>-->
      <!--      </template>-->
      <template slot-scope="scope" slot="menu">
        <el-button
            class="filter-item"
            icon="el-icon-edit"
            size="mini"
            type="primary"
            @click.stop="handleEdit(scope.row,scope.index)">编辑
        </el-button>
        <!--                <el-button-->
        <!--                        class="filter-item"-->
        <!--                        icon="el-icon-delete"-->
        <!--                        size="mini"-->
        <!--                        type="danger"-->
        <!--                        @click="handleDel(scope.row)">删除-->
        <!--                </el-button>-->
      </template>
    </avue-crud>

    <!--楼栋新增窗口-->
    <el-dialog
        :visible.sync="dialogAddVisible"
        center
        title="新增"
        width="35%" @close="dictItemVisible"
        :close-on-click-modal="false">
      <el-form v-model="addform" :rules="rules" style="padding-left: 20px">
        <el-form-item label="楼栋名称" prop="buildingName">
          <el-input v-model="addform.buildingName" placeholder="请输入楼栋名称" style="width: 50%"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button
            class="filter-item"
            size="small"
            @click="dictItemVisible()">取消
        </el-button>
        <el-button
            class="filter-item"
            size="small"
            type="primary"
            @click="handleRowSave()">确定
        </el-button>
      </div>
    </el-dialog>

    <!--    编辑楼栋窗口-->
    <el-dialog
        :visible.sync="dialogEditVisible"
        center
        title="编辑"
        width="35%" @close="dictEditVisible"
        :close-on-click-modal="false">
      <el-form v-model="editform" :rules="rules" style="padding-left: 20px">
        <el-form-item label="楼栋名称" prop="buildingName">
          <el-input v-model="editform.buildingName" placeholder="请输入楼栋名称" style="width: 50%"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button
            class="filter-item"
            size="small"
            @click="dictEditVisible()">取消
        </el-button>
        <el-button
            class="filter-item"
            size="small"
            type="primary"
            @click="handleRowUpdate()">确定
        </el-button>
      </div>
    </el-dialog>

  </basic-container>
</template>

<script>
import {addBuilding, Buildingcount, delBuilding, editBuilding, showBuildingList} from '@/api/hostel/building'
import {tableOption} from '@/const/crud/hostel/building'

export default {
  name: 'building',
  data() {
    return {
      //楼栋
      tableLoading: false,
      tableOption: tableOption,
      tableData: [],
      searchForm: {},
      page: {
        total: 0, // 总页数
        currentPage: 1, // 当前页数
        pageSize: 10 // 每页显示多少条
      },
      outerVisible: false,
      dialogAddVisible: false,
      dialogEditVisible: false,
      addform: {
        buildingName: ''
      },
      editform: {
        buildingName: ''
      },
      rules: {  //必填项（验证规则）
        buildingName: [
          {required: true, trigger: "none"}
        ],
      },
      // databoxoption:{
      //     span:6,
      //     data: [
      //         {
      //             title: '兰玉楼',
      //             count: 0,
      //             icon: 'el-icon-office-building',
      //             color: 'rgb(49, 180, 141)',
      //         },
      //         {
      //             title: '漱玉楼',
      //             count: 0,
      //             icon: 'el-icon-office-building',
      //             color: 'rgb(56, 161, 242)',
      //         },
      //         {
      //             title: '竹轩楼',
      //             count: 0,
      //             icon: 'el-icon-office-building',
      //             color: 'rgb(117, 56, 199)',
      //         }
      //     ]
      // }
    }
    },
    computed: {
    },
    methods: {
      //新增弹窗相关
      addHandle() {
        this.dialogAddVisible = true
      },
      // //获取楼栋下宿舍统计数据
      // getCountBuildingData(){
      //     getCountbybuilding().then(response => {
      //         for (var i = 0; i < this.databoxoption.data.length; i++) {
      //             //this.databoxoption.data[i].title=response.data.data[i].building_id
      //             this.databoxoption.data[i].count=response.data.data[i].countDorm
      //         }
      //         this.tableLoading = false
      //     })
      // },
      //展示楼栋表格
      getList(page, params) {
        this.tableLoading = true
        // this.getCountBuildingData()
        showBuildingList(Object.assign({
          current: page.currentPage,
          size: page.pageSize
        }, params, this.searchForm)).then(response => {
          this.tableData = response.data.data.records
          this.page.total = response.data.data.total
          // 获取宿舍数量
          this.tableData.map(item => {
            Buildingcount(item.buildingId).then(res => {
              if (res.data.code === 0) {
                this.$set(item, 'dormcount',)
                item.dormcount = res.data.data.length
              }
            })
          })
          this.tableLoading = false
        })
      },
      //增加楼栋
      handleRowSave: function () {
        // console.log(this.addform)
        addBuilding(this.addform).then(res => {
          if (res.data.code === 0) {
            this.$message.success('新增成功')
            this.dialogAddVisible = false
            this.getList(this.page)
          } else {
            this.$message.error('新增失败')
          }
        })
      },
      //点击新增的关闭
      dictItemVisible: function () {
        this.dialogAddVisible = false
        this.addform.buildingName = null
      },
      //点击编辑的关闭
      dictEditVisible: function () {
        this.dialogEditVisible = false
      },
      //编辑楼栋
      handleEdit(row, index) {
        // this.$refs.crud.rowEdit(row, index);
        this.editform.buildingName = row.buildingName
        this.editform.buildingId = row.buildingId
        this.dialogEditVisible = true
      },
      //修改楼栋
      handleRowUpdate: function () {
        if(this.editform.buildingName == ''){
          this.$message.error('楼栋名称为空')
          return
        }
        editBuilding(this.editform).then(res => {
          if (res.data.code === 0) {
            this.$message.success('修改成功')
            this.dialogEditVisible = false
            this.getList(this.page)
          } else {
            this.$message.error('修改失败')
          }
        })
      },
      //删除楼栋
      handleDel: function (row) {
        /*this.$confirm('是否确认删除"' + row.buildingName + '"?', '警告', {*/
        this.$confirm('删除楼栋，相关绑定人员信息将失效，对应楼栋将不再进行考勤，请谨慎操作', '警告', {
          confirmButtonText: '确认删除',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(function () {
          return delBuilding(row.buildingId)
        }).then(res=> {
          // debugger
          if (res.data.code === 0) {
            this.$message.success('删除成功')
            this.getList(this.page)
          } else {
            this.$message.error('删除失败'+res.data.msg)
          }
        })
      },
      //搜索楼栋页面内容
      searchChange(form, done) {
        this.searchForm = form
        this.page.currentPage = 1
        this.getList(this.page, form)
        done()
      },
      //点击每页多少条会调size-change方法回调
      sizeChange(pageSize) {
        this.page.pageSize = pageSize
      },
      //点击页码会调用current-change方法回调当前页
      currentChange(current) {
        this.page.currentPage = current
      },
      //清空时重置页面
      searchReset(){
        this.page={};
        this.searchForm = 0;
        this.getList(this.page)
      }
    }
  }
</script>
<style scoped>
/deep/.el-form-item__label{
  text-align: left;
}
/deep/.avue-form__row{
  padding-left: 2px !important;
  margin-right: 36px;
}
</style>
